<!--
 * @Author: yinche 2814620694@qq.com
 * @Date: 2023-06-02 16:27:37
 * @LastEditors: yinche 2814620694@qq.com
 * @LastEditTime: 2023-06-18 00:21:09
 * @FilePath: \qiemeng-app\src\views\QianDao.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<style lang="less" scoped>
.bwl {
    display: flex;
    align-items: center;
    .note {
        width: 80%;
        height: 0.5rem;
    }
}
.progress {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.qiandao {
    margin-top: 0.6rem;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    padding: 0.2rem;
    .ds {
        img {
            margin-top: 0.2rem;
            padding: 0.2rem;
            width: 3rem;
            height: 3rem;
        }
        .qds {
            text-align: center;
            font-size: 0.4rem;
            color: rgb(242, 21, 21);
        }
    }
    .top {
        font-size: 0.5rem;
        text-align: center;
        color: blueviolet;
    }
    .btn {
        margin-top: 0.3rem;
        .stop {
            width: 100%;
        }
        .outime {
            display: flex;
            flex-direction: column;
            input {
                margin-top: 0.2rem;
                width: 100%;
                height: 0.5rem;
            }
            .outTime {
                margin-top: 0.2rem;
            }
        }
    }
    .one {
        // flex-direction: column;
        display: flex;
        margin-top: 0.3rem;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
<template>
    <div class="qiandao">
        <van-button @click="$router.go(-1)" type="primary">退出</van-button>
        <p class="top">谦道-音频汇集</p>
        <div class="one">
            <audio ref="audio1" src="http://yinche.work:7777/audio/1-275.mp3"></audio>
            <van-button @click="playOne()" type="primary">播放1-275</van-button>
            <div class="progress">
                <input type="range" min="0" max="100" v-model="progress" @change="updateAudioProgress" />
                {{ currentTime1 }}={{ duration1 }}
            </div>
            <van-button @click="pauseOne()" type="warning">暂停1-275</van-button>
        </div>
        <div class="one">
            <audio ref="audio2" src="http://yinche.work:7777/audio/276-526.mp3"></audio>
            <van-button @click="playtwo()" type="primary">播放276-526</van-button>
            <div class="progress">
                <input type="range" min="0" max="100" v-model="progressT" @change="updateAudioProgressT" />
                {{ currentTime2 }}={{ duration2 }}
            </div>
            <van-button @click="pausetwo()" type="warning">暂停276-526</van-button>
        </div>
        <div class="one">
            <audio ref="audio3" src="http://yinche.work:7777/audio/527-736.mp3"></audio>
            <van-button @click="playthree()" type="primary">播放527-736</van-button>
            <div class="progress">
                <input type="range" min="0" max="100" v-model="progressTH" @change="updateAudioProgressTH" />
                {{ currentTime3 }}={{ duration3 }}
            </div>
            <van-button @click="pausethree()" type="warning">暂停527-736</van-button>
        </div>
        <div class="one">
            <audio ref="audio4" src="http://yinche.work:7777/audio/two.mp3"></audio>
            <van-button @click="playfour()" type="primary">播放第二季</van-button>
            <div class="progress">
                <input type="range" min="0" max="100" v-model="progressF" @change="updateAudioProgressF" />
                {{ currentTime4 }}={{ duration4 }}
            </div>
            <van-button @click="pausefour()" type="warning">暂停第二季</van-button>
        </div>
        <div class="btn">
            <van-button @click="stopAll()" class="stop" type="danger">清空所有进度</van-button>
            <div class="outime">
                <input placeholder="请输入要定时的分钟数" v-model="timeInSeconds" />
                <van-button @click="setTimer(timeInSeconds)" class="outTime" type="success">定时关闭</van-button>
            </div>
        </div>
        <div class="ds">
            <p>
                <img src="../assets/images/VX.jpg" alt="" />
                <img src="../assets/images/zfb.jpg" alt="" />
            </p>
            <p class="qds">欢迎老板赏杯水支持一下</p>
            <div class="bwl">
                <textarea class="note" v-model="content"></textarea>
                <button @click="saveNote">点击保存</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';
const content = ref(localStorage.getItem('note') || '上次进度:'); //备忘录
const timeInSeconds = ref(); //定时
const progress = ref(0); //进度条1
const progressT = ref(0); //进度条2
const progressTH = ref(0); //进度条3
const progressF = ref(0); //进度条4
const audio1 = ref(null); //音频1
const audio2 = ref(null); //音频2
const audio3 = ref(null); //音频3
const audio4 = ref(null); //音频4
const currentTime1 = ref(0); // 音频1的当前时间
const duration1 = ref(0); //音频1的总时长
const currentTime2 = ref(0); // 音频2的当前时间
const duration2 = ref(0); //音频2的总时长
const currentTime3 = ref(0); // 音频3的当前时间
const duration3 = ref(0); //音频3的总时长
const currentTime4 = ref(0); // 音频4的当前时间
const duration4 = ref(0); //音频4的总时长
function saveNote() {
    localStorage.setItem('note', content.value);
    alert('已保存！');
}
// 获取并且计算时长1
const updateTime1 = () => {
    if (audio1.value) {
        currentTime1.value = formatTime(Math.floor(audio1.value.currentTime));
        duration1.value = formatTime(Math.floor(audio1.value.duration));
    }
};
setInterval(updateTime1, 1000); //每一秒执行一次
const updateTime2 = () => {
    if (audio2.value) {
        currentTime2.value = formatTime(Math.floor(audio2.value.currentTime));
        duration2.value = formatTime(Math.floor(audio2.value.duration));
    }
};
setInterval(updateTime2, 1000); //每一秒执行一次
const updateTime3 = () => {
    if (audio3.value) {
        currentTime3.value = formatTime(Math.floor(audio3.value.currentTime));
        duration3.value = formatTime(Math.floor(audio3.value.duration));
    }
};
setInterval(updateTime3, 1000); //每一秒执行一次
const updateTime4 = () => {
    if (audio4.value) {
        currentTime4.value = formatTime(Math.floor(audio4.value.currentTime));
        duration4.value = formatTime(Math.floor(audio4.value.duration));
    }
};
setInterval(updateTime4, 1000); //每一秒执行一次
//计算公式
const formatTime = timeInSeconds => {
    let hours = Math.floor(timeInSeconds / 3600);
    let minutes = Math.floor((timeInSeconds % 3600) / 60);
    let seconds = Math.floor(timeInSeconds % 60);
    if (hours < 10) {
        hours = '0' + hours;
    }
    if (minutes < 10) {
        minutes = '0' + minutes;
    }
    if (seconds < 10) {
        seconds = '0' + seconds;
    }
    return `${hours}:${minutes}:${seconds}`;
};
// 停止全部
function stopAll() {
    audio1.value.currentTime = 0;
    audio2.value.currentTime = 0;
    audio3.value.currentTime = 0;
    audio4.value.currentTime = 0;
    audio1.value.pause();
    audio2.value.pause();
    audio3.value.pause();
    audio4.value.pause();
}
//播放1
const playOne = () => {
    audio1.value.play();
};
//暂停1
const pauseOne = () => {
    audio1.value.pause();
};
// 播放4
const playfour = () => {
    audio4.value.play();
};
//暂停4
const pausefour = () => {
    audio4.value.pause();
};
// 3
const playthree = () => {
    audio3.value.play();
};
// 3
const pausethree = () => {
    audio3.value.pause();
};
//2
const playtwo = () => {
    audio2.value.play();
};
//2
const pausetwo = () => {
    audio2.value.pause();
};
// 初始化1
const updateAudioProgress = () => {
    const audioOne = audio1.value;
    if (!audioOne) return;
    progress.value = (audioOne.currentTime / audioOne.duration) * 100;
};
// 进度条控制1
watch(progress, newVal => {
    const audioOne = audio1.value;
    if (!audioOne) return;

    audioOne.currentTime = (audioOne.duration / 100) * newVal;
});
// 初始化2
const updateAudioProgressT = () => {
    const audioT = audio2.value;
    if (!audioT) return;
    progressT.value = (audioT.currentTime / audioT.duration) * 100;
};
// 进度条控制2
watch(progressT, newVal => {
    const audioT = audio2.value;
    if (!audioT) return;

    audioT.currentTime = (audioT.duration / 100) * newVal;
});
// 初始化3
const updateAudioProgressTH = () => {
    const audioTH = audio3.value;
    if (!audioTH) return;
    progressTH.value = (audioTH.currentTime / audioTH.duration) * 100;
};
// 进度条控制3
watch(progressTH, newVal => {
    const audioTH = audio3.value;
    if (!audioTH) return;
    audioTH.currentTime = (audioTH.duration / 100) * newVal;
});
// 初始化4
const updateAudioProgressF = () => {
    const audioF = audio4.value;
    if (!audioF) return;
    progressF.value = (audioF.currentTime / audioF.duration) * 100;
};
// 进度条控制4
watch(progressF, newVal => {
    const audioF = audio4.value;
    if (!audioF) return;
    audioF.currentTime = (audioF.duration / 100) * newVal;
});

//定时播放功能 60s
function setTimer(timeInSeconds) {
    alert('定时成功');
    setTimeout(() => {
        stopAll();
    }, timeInSeconds * 60000);
}
</script>
